<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="年份" prop="year">
        <el-date-picker  v-model="queryParams.year" type="year"  placeholder="请选择年份" @change="bindChangeYear"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain @click="handleAddDay()" v-hasPermi="['system:statement:issue']">下发</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row> -->
    <div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#E0EAFB!important'}" :row-class-name="tableRowClassName"
        :span-method="objectSpanMethod" border  show-overflow-tooltip >
        <el-table-column prop="deptName" label="收费站"  />
        <el-table-column prop="year" label="年度" />
        <el-table-column prop="holiday" label="日期"  />
        <el-table-column prop="enTraffic" label="入口免费车通行量" />
        <el-table-column prop="exTraffic" label="出口免费车通行量" />
        <el-table-column prop="reduceFee" label="减免通行费" />
        <el-table-column prop="updateTime" label="提交时间" />
        <el-table-column prop="d" label="操作">
          <template #default="scope">
            <el-button size="small" link type="primary" @click="openListenerForm(scope.row, scope.$index)">上报</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="节假日统计表上报" v-model="open" width="1000px" append-to-body>
      <el-form ref="activityRef" :model="form" :rules="rules" label-width="130px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="收费站" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入收费站" style="width:100%" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年度" prop="year">
              <el-input v-model="form.year" placeholder="请输入年度" style="width:100%" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期" prop="holiday">
              <el-input v-model="form.holiday" placeholder="请输入日期" style="width:100%" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width:100%" label="入口免费车通行量" prop="enTraffic">
              <el-input v-model="form.enTraffic" placeholder="请输入入口免费车通行量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width:100%" label="减免通行量" prop="exTraffic">
              <el-input v-model="form.exTraffic" placeholder="请输入减免通行量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="width:100%" label="减免通行费" prop="reduceFee">
              <el-input v-model="form.reduceFee" placeholder="请输入减免通行费" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm" v-hasPermi="['system:statement:edit']">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import moment from 'moment'
import { statementList, statementEdit, getStatementDate, submitIssue,getHolidayDate } from "@/api/charge/ticket";
import useUserStore from '@/store/modules/user'

const route = useRoute();
const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const { holiday_type } = proxy.useDict('holiday_type');
const queryParams = ref({ deptId: '', year: moment().format('YYYY'), holidayType: route.query.year })
const tableData = ref()
const deptId = ref()
const tag = ref(1)
const open = ref(false)
const form = ref({})


const holidayList = ref([])



if (route.query) {
  queryParams.value.holidayType = route.query.type
}


const openListenerForm = (item, index) => {
  open.value = true;
  form.value = item;

}

const getList = () => {
  statementList(queryParams.value).then(res => {
    if (res.code == 200) {
      tableData.value = res.data
    }

  })
}


const submitForm = () => {
  proxy.$refs["activityRef"].validate(valid => {
    if (valid) {
      statementEdit(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        open.value = false;
        getList();
      });
    }
  });
}

const cancel = () => {
  open.value = false;
}
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptId.value = res.user.dept.deptId;
      queryParams.value.deptId = deptId.value;
    
      getList()
    }
  })
}
const bindChangeYear=(val)=>{
  queryParams.value.year = moment(val).format('YYYY');
    
}
function handleQuery() {
  getList();
}
getDeptId()

</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.flex .label {
  color: #333;
  font-size: 14px;
}
/deep/.padding .el-radio-button--large .el-radio-button__inner {
  padding: 8px 19px;
}
/deep/ .custom-tag .el-radio-button--large .el-radio-button__inner {
  min-width: 60px;
  height: 32px;
  line-height: 32px;
  margin: 0 4px 0;
  padding: 0 10px;
  border: 1px solid #e4e4e4;
  font-size: 14px;
}
/deep/ .custom-tag .el-radio-button--large.is-active .el-radio-button__inner {
  background: #fff;
  border: 1px solid #246bcc;
  color: #246bcc;
  position: relative;
}

/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-top: 20px solid #246bcc;
  border-left: 20px solid transparent;
}
/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 6px;
  background: transparent;
  top: 2px;
  right: 4px;
  border: 1px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-55deg);
  z-index: 9;
}

.margin-right {
  margin-right: 8px;
}

/deep/ .input-height .el-input__wrapper {
  height: 32px;
}
/deep/ .input-height .el-date-editor.el-input {
  height: 32px;
}
.margin-right-lg {
  margin-right: 32px;
}
.cursor {
  cursor: pointer;
}
.flex-end {
  margin-left: auto;
}
.active {
  position: relative;
}
.active::before {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  border-radius: 2px;
  background: var(--el-color-primary);
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

/deep/ .el-table .warning-row {
  background: #e0eafb !important;
  text-align: center;
}
/deep/ .el-table .success-row {
  background: #ffeed9 !important;
  text-align: center;
}
/deep/ .el-table .info-row {
  background: #eaeaea !important;
  text-align: center;
}

.text-red {
  color: red;
}

.scroll {
  height: 800px;
  overflow-y: scroll;
}
.align-center {
  display: flex;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
  margin: 10px;
}
.wrap > div {
  margin: 10px;
}
.margin-bottom {
  margin-bottom: 20px;
}
</style>